<template>
	<view class="cart">
		<u-list @scrolltolower="scrolltolower">
			<u-swipe-action>
				<u-swipe-action-item @click="deleteItem(item, index, $event)" v-if="indexList.length > 0 && item.moreBagCommodityPublish" v-for="(item, index) in indexList" :key="item.id" :options="options1">
					<u-list-item>
						<view class="item">
							<image class="select" v-if="!item.isSelect" @tap="item.isSelect=true"
								src="../../static/icon/image_46.png" mode=""></image>
							<image class="select" v-else @tap="item.isSelect=false" src="../../static/icon/image_47.png"
								mode=""></image>
							<image class="goods-img"
								@tap="goCommodity(item.moreBagCommodityPublish)"
								v-if="item.moreBagCommodityPublish.morebagPublishPictures"
								:src="item.moreBagCommodityPublish.morebagPublishPictures[0].picture" mode="aspectFit"></image>
							<view class="desc">
								<view class="name-clear">
									<view class="name"> 
										{{$t("goodsReleased.language") == "zh"?item.moreBagCommodityPublish.commodity:item.moreBagCommodityPublish.commodityEn}}
									</view>
								</view>
								<view class="sku">
									{{$t("cart.sku")}}：{{item.moreBagCommodityPublish.measurement}}
								</view>
								<view class="price-count">
									<view class="price">
										<!-- 三个字符一个逗号 -->
										$
										{{String(item.moreBagCommodityPublish.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}}
									</view>
									<view class="sell">
										{{item.moreBagCommodityPublish.status==1?$t('common.noSold'):item.moreBagCommodityPublish.status==2?$t('common.shelf'):$t('common.sold')}}
									</view>
									<view class="count">
										<view class="num">
											x1
										</view>
									</view>
								</view>
							</view>
						</view>
					</u-list-item>
				</u-swipe-action-item>
			</u-swipe-action>
		</u-list>

		<view class="settlement">
			<view class="left">
				<view class="all" @tap="allSelect(isAll)">
					<image v-if="!isAll" src="../../static/icon/image_46.png" mode=""></image>
					<image v-else src="../../static/icon/image_47.png" mode=""></image>
					<view class="all-desc">
						{{$t("cart.allSelect")}}
					</view>
				</view>
				<view class="total">
					<view class="total-desc">
						{{$t("cart.total")}}：
					</view>
					<view class="total-price">
						$ <text>{{totalPrice}}</text>
					</view>
				</view>
			</view>

			<u-toast ref="uToast"></u-toast>

			<view class="right" @tap="goCratOrder">
				{{$t("cart.settlement")}}
			</view>
		</view>
		<u-modal confirmColor="#000" width="500rpx" :title="title" :show="mShow" @close="mShow=false" @cancel="mShow=false" @confirm="mConfirm" closeOnClickOverlay showCancelButton>
<!-- 			<view class="" style="text-align: center;color: #858585;">
				FENDI BY THE WAY BAG
			</view> -->
		</u-modal>
	</view>
</template>

<script>
	import {
		getCartList,
		deleteCart
	} from "@/common/api.js"

	export default {
		computed: {
			totalPrice() {
				let total = 0;
				this.indexList.forEach((item) => {
					if (item.isSelect && item.moreBagCommodityPublish) {
						total += parseInt(item.moreBagCommodityPublish.money);
					}
				});
				return String(total).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
			},
			isAll() {
				const isNotAll = this.indexList.every((item) => {
					return item.isSelect == true;
				});
				return isNotAll;
			}
		},
		data() {
			return {
				indexList: [],
				value: "",
				options1: [{
					text: this.$t("cart.del")
				}],
				index: null,
				mShow: false,
				item: null,
				title: this.$t("cart.confirm")
			}
		},
		onLoad() {
			this.loadmore()
		},
		methods: {
			goCommodity(item) {
				uni.navigateTo({
					url:`/pages/commodityDetails/commodityDetails?id=${item.id}`
				})
			},
			async mConfirm() {
				this.mShow = false;
				this.indexList.splice(this.index, 1)
				const res = await deleteCart(this.item.id);
				console.log(res);
			},
			// 删除购物车商品
			async deleteItem(item, index, e) {
				this.mShow = true;
				this.item = item;
				this.index = index;
				console.log(e);
			},
			// 获取购物车数据
			async initCartData() {
				const res = await getCartList();
				console.log(res);
				if(res.code === 200) {
					res.rows.map(item => {
						return item["isSelect"] = false;
					});
					this.indexList = res.rows;
				}
			},
			// 全选
			allSelect(isAll) {
				console.log(isAll);
				if (!isAll) {
					this.indexList = this.indexList.map((item) => {
						item.isSelect = true;
						return item
					});
				} else {
					this.indexList = this.indexList.map((item) => {
						item.isSelect = false;
						return item
					});
				}
			},
			subtract() {

			},
			scrolltolower() {
				console.log("到达底部");
				this.loadmore();
			},
			loadmore() {
				// for (let i = 0; i < 50; i++) {
				// 	this.indexList.push({
				// 		name: "FENDI BY THE WAY BAG"
				// 	})
				// }
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			goCratOrder() {
				// console.log(this.totalPrice);
				let sum = 0;
				let selIndex = null;
				this.indexList.forEach((item, index) => {
					if(item.isSelect && item.moreBagCommodityPublish) {
						sum += 1;
						selIndex = String(index);
					}
				});
				console.log();
				if(this.indexList[selIndex].moreBagCommodityPublish.status !=1) {
					// uni.showToast({
					// 	icon: 'none',
					// 	title: this.$t('cart.hint3'),
					// 	duration: 1200,
					// 	mask: true
					// })
					this.$refs.uToast.show({
						type: 'error',
						icon: false,
						title: '失败主题',
						message: this.$t('cart.hint3'),
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png',
						duration: "1200"
					})
					return
				}
				
				if (sum <= 1 && selIndex) {
	
			
					uni.navigateTo({
						url: `/pages/confirmGoodsOrder/confirmGoodsOrder?item=${encodeURIComponent(JSON.stringify(this.indexList[selIndex].moreBagCommodityPublish))}`,
					})
				} else if (sum > 1) {
					uni.showToast({
						icon: 'none',
						title: this.$t('cart.hint'),
						duration: 1200,
						mask: true
					})
				} else {
					this.showToast();
				}
			},
			showToast() {
				this.$refs.uToast.show({
					type: 'error',
					icon: false,
					title: '失败主题',
					message: this.$t('cart.hint2'),
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png',
					duration: "1200"
				})
			},
			isLogin() {
				const token = uni.getStorageSync("token")
				console.log(token);
				if (!token) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}
			} 
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("cart.title")
			});
		},
		onShow() {
			this.indexList = [];
			this.isLogin();
			this.initCartData();
		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}
</style>
<style lang="scss" scoped>
	.cart {
		padding: 0 24rpx;
		// padding-bottom: 20rpx;
		margin-bottom: 112rpx;
	}

	.u-swipe-action-item {
		margin: 20rpx 0;
	}
	
	.sell {
		color: #717184;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 20rpx;
		line-height: 42rpx;
		letter-spacing: 0rpx;
		margin-left: 10rpx;
	}

	.item {
		margin-top: 20rpx;
		padding: 22rpx 24rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx #00000019;
		display: flex;
		align-items: center;

		.select {
			width: 48rpx;
			height: 48rpx;
		}

		.goods-img {
			width: 160rpx;
			height: 160rpx;
			margin-left: 24rpx;
			border-radius: 20rpx;
		}

		.desc {
			margin-left: 16rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-between;

			.name-clear {
				display: flex;
				justify-content: space-between;

				.name {
					width: 380rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					color: #000000;
					font-family: PingFang SC;
					font-weight: semibold;
					font-size: 30rpx;
				}

				.clear {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.sku {
				color: #858585;
				font-family: PingFang SC;
				font-weight: semibold;
				font-size: 26rpx;
				margin-top: 6rpx;
			}

			.price-count {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;

				.price {
					color: #FF0000;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 36rpx;
				}

				.count {
					margin: 0 20rpx;
					color: #717184;
					font-family: PingFang SC;
					font-weight: semibold;
					font-size: 26rpx;
				}
			}
		}
	}

	.settlement {
		position: fixed;
		z-index: 10;
		width: 100%;
		height: 112rpx;
		left: 0;
		bottom: var(--window-bottom);
		display: flex;
		align-items: center;

		.left {
			height: 100%;
			width: 68%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			padding: 0 32rpx;
			box-sizing: border-box;

			.all {
				display: flex;
				align-items: center;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				.all-desc {
					color: #858585;
					font-family: PingFang SC;
					font-weight: regular;
					font-size: 24rpx;
				}
			}

			.total {
				margin-right: 32rpx;
				display: flex;
				align-items: center;

				.total-desc {
					color: #000000;
					font-family: PingFang SC;
					font-weight: semibold;
					font-size: 24rpx;
				}

				.total-price {
					color: #FF0000;
					font-family: PingFang SC;
					font-weight: semibold;
					font-size: 28rpx;

					text {
						color: #FF0000;
						font-family: PingFang SC;
						font-weight: semibold;
						font-size: 40rpx;
						margin-left: 7rpx;
					}
				}
			}
		}

		.right {
			width: 32%;
			background-color: #000000;
			color: #FFFFFF;
			font-family: PingFang SC;
			font-weight: semibold;
			font-size: 32rpx;
			line-height: 112rpx;
			text-align: center;
		}
	}
</style>
